import React from 'react';

export default function VideoSkeleton() {
  return (
    <>
      {/* 大屏骨架布局 - 只在lg及以上断点显示 */}
      <div className="hidden lg:flex lg:flex-row w-full">
        {/* 左侧播放器骨架 */}
        <div className="w-[70%] xl:w-3/4">
          <div className="w-full aspect-video bg-background-darker rounded-l-lg animate-pulse">
            <div className="flex items-center justify-center h-full">
              <svg 
                className="w-12 h-12 text-accent-primary animate-spin" 
                xmlns="http://www.w3.org/2000/svg" 
                width="24" 
                height="24" 
                viewBox="0 0 24 24" 
                fill="none" 
                stroke="currentColor" 
                strokeWidth="2" 
                strokeLinecap="round" 
                strokeLinejoin="round"
              >
                <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path>
              </svg>
            </div>
          </div>
        </div>

        {/* 右侧播放列表骨架 */}
        <div className="w-[30%] xl:w-1/4">
          <div className="h-full bg-background-darker rounded-r-lg border-l border-gray-900">
            <div className="p-4">
              <div className="h-6 bg-background-dark rounded w-3/4 mb-4 animate-pulse"></div>
              <div className="space-y-3">
                {[...Array(7)].map((_, index) => (
                  <div key={index} className="h-8 bg-background-card rounded animate-pulse"></div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 小屏骨架布局 - 只在lg以下断点显示 */}
      <div className="block lg:hidden w-full">
        {/* 播放器骨架 */}
        <div className="w-full aspect-video bg-background-darker animate-pulse mb-4">
          <div className="flex items-center justify-center h-full">
            <svg 
              className="w-12 h-12 text-accent-primary animate-spin" 
              xmlns="http://www.w3.org/2000/svg" 
              width="24" 
              height="24" 
              viewBox="0 0 24 24" 
              fill="none" 
              stroke="currentColor" 
              strokeWidth="2" 
              strokeLinecap="round" 
              strokeLinejoin="round"
            >
              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path>
            </svg>
          </div>
        </div>

        {/* 移动播放列表骨架 */}
        <div className="w-full px-3 mb-4">
          <div className="h-6 bg-background-dark rounded w-1/2 mb-3 animate-pulse"></div>
          <div className="h-10 w-full bg-background-card rounded animate-pulse"></div>
        </div>
      </div>
    </>
  );
} 